<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>救助模块</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8"/>
    <meta name="keywords" content=""/>

    <!--// Meta tag Keywords -->
    <!-- css files -->
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css" type="text/css" media="all">
    <!-- Owl-Carousel-CSS -->
    <link rel="stylesheet" href="/static/css/style.css" type="text/css" media="all"/>
    <!-- Bootstrap-Core-CSS -->
    <link rel="stylesheet" href="/static/css/font-awesome.css" type="text/css" media="all">

</head>
<style>
    .btn-lg{
        background: #4aaaeb;
    }
    .table{
        margin-top: 1px;
        text-align: center;
        border-color: #e36fa7af;
    }
</style>
<body>
<!--导航栏-->
<!-- sticky navigation -->
<div class="nav-links">
    <nav class='navbar navbar-default'>
        <div class='container'>
            <div class='collapse navbar-collapse'>
                <ul style="position: relative">
                    <li>
                        <!--						<a href="/user/index">主页</a>-->
                        <a th:href="@{/user/index}">主页</a>
                    </li>
                    <li>
                        <!--						<a href="/user/about">流浪猫狗知识</a>-->
                        <a th:href="@{/user/about}">流浪猫狗知识</a>
                    </li>
                    <li>
                        <a th:href="@{'/user/toPersonal?id='+${session.user.id}}">个人中心</a>
                        <!--						<a href="/user/personal">个人中心</a>-->

                    </li>
                    <li>
                        <a th:href="@{/goodsy/getAGoodsyAll}">救助商品</a>
                    </li>
                    <li>
                        <a th:href="@{/adopt/login}">领养中心</a>
                    </li>
                    <li th:unless="${session.user.userName eq null}">
                        <a th:href="@{/user/blog}">博客</a>
                    </li>
                    <li th:if="${session.user.userName eq null}">
                        <button class="btn-primary btn-lg loging" data-toggle="modal" data-target="#login">注册/登录</button>
                    </li>
                    <li th:unless="${session.user.userName eq null}" >
                        <button class="btn-primary btn-lg" data-toggle="modal" data-target="#editUsers">修改</button>
                    </li>
                    <li>
                        <span th:text="当前用户+'：'+${session.user.userName}"></span>
                    </li>
                    <button th:unless="${session.user.userName eq null}"style="position: absolute;right: -70px;top: 5px" class="btn-primary btn-lg exit">退出</button>
                </ul>
            </div>
        </div>
    </nav>
</div>
<!-- //sticky navigation -->
<div class="modal fade" id="editUsers" tabindex="-1" role="dialog" aria-labelledby="myModalLabe">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabe">修改用户信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="edit_admin_form" action="/user/updatePersonInfo">
                    <input type="hidden" id="edit_id" name="id">
                    <div class="form-group">
                        <label for="edit_userName" class="col-sm-2 control-label">
                            用户名称
                        </label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="edit_userName" placeholder="用户名称" name="userName" disabled>
                        </div>
                        <label for="edit_password" class="col-sm-2 control-label">
                            用户密码
                        </label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="edit_password" placeholder="用户密码" name="password" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="edit_sex" class="col-sm-2 control-label">
                            性别
                        </label>
                        <div class="col-sm-4">
                            <select class="form-control" id="edit_sex" name="sex">
                                <option value="1">男</option>
                                <option value="0">女</option>
                            </select>
                        </div>
                        <label for="edit_telephone" class="col-sm-2 control-label">
                            电话号码
                        </label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="edit_telephone" placeholder="电话" name="phone">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="edit_Email" class="col-sm-2 control-label">
                            Email
                        </label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="edit_Email" placeholder="Email"  name="email">
                        </div>
                        <label for="edit_address" class="col-sm-2 control-label">
                            地址
                        </label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="edit_address" placeholder="地址" name="address">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class=" btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class=" btn-primary" >保存修改</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
<!-- team -->
<div class="team" id="team">
    <div class="container">
        <h3 class="agile-title">捐献爱心</h3>
        <div class="col-md- 12  team-agileinfo">
            <div class="col-md-6 team-grid " th:each="list,status:${aglist}">
                <div class="team-grid-left xiugai">
                    <img th:src="${list.pic}" class="img-responsive"/>
                    <div class="progress" style="height: 20px; margin-top:5px;">
                        <input type="hidden" name="jindu" class="jindu"
                               th:value="((${list.salvageamount}/${list.totalamount})*100)">
                        <div class="progress-bar project1 jindutiao" th:id="${list.id}" role="progressbar"
                             style="width: 25%;"
                             aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"
                        >25%
                        </div>
                    </div>
                </div>
                <div class="team-grid-right">
                    <div>
                        <h4 th:text="${list.petName}"></h4>
                        <p>救助商品内容</p>
                        <button type="button" id="jiuzhu" class="btn-success" data-toggle="modal" data-target="#login"
                              th:onclick="'javascript:Values('+${list.id}+')'">提供救助</button>
                        <input type="hidden" name="id" class="goodsyid" th:value="${list.id}">
                        <input type="hidden" name="totalamount" class="totalamount" th:value="${list.totalamount}">
                        <input type="hidden" name="salvageamount" class="salvageamount"
                               th:value="${list.salvageamount}">
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>


<!-- contact -->
<div class="contact" id="contact">
    <div class="container">
        <div class="col-md-8 col-sm-8 contact-right">
            <h4>Send Your Advice</h4>
            <form th:action="@{/goodsyy/insertAG}" method="post">
                <input type="text" name="name" placeholder="Your name" required="">
                <input type="email" name="email" placeholder="Your email" required="">
                <input type="text" name="subject" placeholder="Your subject" required="">
                <input type="text" name="phone" placeholder="Phone number" required="">
                <textarea name="message" placeholder="Your message" required=""></textarea>
                <input type="submit" value="Send">
            </form>
        </div>
        <div class="col-md-4 col-sm-4 contact-left">
            <h3 class="axphb" style="border-bottom:1px solid grey;">爱心排行榜</h3>
            <table class="table" border="1">
                <thead>
                <tr>
                    <th scope="col">排名</th>
                    <th scope="col">救助对象</th>
                    <th scope="col">救助人员</th>
                    <th scope="col">救助积分</th>
                </tr>
                </thead>
                <tr th:each="list,status:${aglist}">
                    <th scope="row" th:text="${status.index+1}"></th>
                    <td th:text="${list.petName}"></td>
                    <td th:text="${list.userName}"></td>
                    <td th:text="${list.score}"></td>
                    <!--                    <td th:text="${g.score}"></td>-->
                </tr>
            </table>
        </div>
    </div>
</div>
<!-- //team -->
<!-- js -->
<!--救助弹出框-->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="tab-content">
                <div class="modal-body">
                    <h4 class="agile-title">捐献爱心</h4>
                    <form class="form-horizontal" method="post"
                              th:action="@{/goodsy/updateAGoodsy}">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">救助编号</label>
                            <div class="col-sm-8">
                                <input id="number" type="text" class="form-control"  placeholder="救助编号"
                                       name="id">
                            </div>
                        </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">救助金额</label>
<!--                                <input type="hidden" name="">-->
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="amount" placeholder="救助金额"
                                           name="salvageamount">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn-primary" >确认</button>
                                <button type="button" class=" btn-default" data-dismiss="modal">关闭</button>
                            </div>
                        </form>
                    </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--<script src="../JQuery/jquery-3.4.1.min.js"></script>-->
<script src="/static/js/jquery-2.2.3.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<!-- Necessary-JavaScript-File-For-Bootstrap -->
<!-- //js -->
</body>

<script>

    $(function () {
        var progress1 = parseInt($("#1").siblings().val());
        var progress2 = parseInt($("#2").siblings().val());
        var progress3 = parseInt($("#3").siblings().val());
        var progress4 = parseInt($("#4").siblings().val());
        if (progress1 >= 100) {
            $("#1").html("100%");
            $("#1").css('width', "100%");
        } else {
            $("#1").html(progress1 + "%");
            $("#1").css('width', progress1 + "%");
        }
        if (progress2 >= 100) {
            $("#2").html("100%");
            $("#2").css('width', "100%");
        } else {
            $("#2").html(progress2 + "%");
            $("#2").css('width', progress2 + "%");
        }
        if (progress3 >= 100) {
            $("#3").html("100%");
            $("#3").css('width', "100%");
        } else {
            $("#3").html(progress3 + "%");
            $("#3").css('width', progress3 + "%");
        }
        if (progress4 >= 100) {
            $("#4").html("100%");
            $("#4").css('width', "100%");
        } else {
            $("#4").html(progress4 + "%");
            $("#4").css('width', progress4 + "%");
        }
    });



    $('.jz1').click(function () {
        alert("1");
        var totalamount = parseInt($(this).siblings('.totalamount').val());
        var salvageamount = parseInt($(this).siblings('.salvageamount').val());
        if(salvageamount < totalamount){
            var price = parseInt(prompt("请输入救助金额", "200"));
            if (price > 0) {
                var goodsyid = parseInt($(this).siblings('.goodsyid').val());
                //救助金额
                var salvageamount2 = parseInt($(this).siblings('.salvageamount').val()) + price;
                alert("救助" + $(this).siblings("h4").text() + "成功");
                location.href = "http://localhost:8081/goodsy/updateAGoodsy?goodsyid=" + goodsyid + "&salvageamount=" + salvageamount2;
            }
        }
    });
    $(".exit").on('click', function () {
        location.href = 'http://localhost:8081/';
    });

    function Values(id){
        $("#number").val(id)
    }
</script>
</html>